<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('员工排班列表')" />
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">

        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <div class="btn-group-sm" id="toolbar" role="group">
                               <a class="btn btn-success"
                                  th:if="${session.QuanXian == 1 || session.QuanXian eq '1'}"
                                  onclick="$.operate.add();" shiro:hasPermission="paiban:paibanTest:add">
                                <i class="fa fa-plus"></i> 添加
                            </a>
<!--                            <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="paiban:paibanTest:edit">-->
<!--                                <i class="fa fa-edit"></i> 修改-->
<!--                            </a>-->
                            <a class="btn btn-danger multiple"
                               th:if="${session.QuanXian == 1 || session.QuanXian eq '1'}"
                               onclick="removeRQ()">
                                <i class="fa fa-remove"></i> 删除
                            </a>
                            <a class="btn btn-warning" onclick="$.modal.open('Excel导入','/paiban/paibanTest/excelImport',800,600)"
                               th:if="${session.QuanXian == 1 || session.QuanXian eq '1'}">
                            <i class="fa fa-download"></i> 导入
                        </a>
                            <a class="btn btn-success" onclick="">
                                <i class="fa fa-plus"></i> 签到
                            </a>

                        </div>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">
            <div class="col-sm-2">
                <label class="col-sm-4 control-label" style="margin: 7px 0 5px 0;text-align: end;">时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="date"
                               th:value="${#dates.format(#calendars.createNow(), 'yyyy-MM')}"
                               onchange="tableSet(this.value)"
                               class="form-control" placeholder="yyyy-MM" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        <div class="col-sm-12 select-table table-striped" style="display: flex;">

            <table id="table4first" style="margin: 10px 20px 10px 20px;">
                <thead></thead>
                <tbody id="tbody1Check">
                </tbody>
            </table>
            <table id="table4two" style="margin: 10px 20px 10px 20px;">
                <thead></thead>
                <tbody id="tbody2Check">
                </tbody>
            </table>
            <table id="table4three" style="margin: 10px 20px 10px 20px;">
                <thead></thead>
                <tbody id="tbody3Check">
                </tbody>
            </table>
            <table id="table4four" style="margin: 10px 20px 10px 20px;">
                <thead></thead>
                <tbody id="tbody4Check">
                </tbody>
            </table>
            <table id="table5five" style="margin: 10px 20px 10px 20px;">
                <thead></thead>
                <tbody id="tbody5Check">
            <!--             <tr style="display: table-row;" id="trCheck">
                             <td style="padding: 5px 10px 5px 10px;"></td>
                             <td></td>
                             <td th:if="${session.QuanXian == 1 || session.QuanXian eq '1'}">
                                 <a class="btn btn-success" href="javascript:void(0)" onclick="$.operate.edit()"><i class="fa fa-edit"></i>编辑</a>
                                 <a class="btn btn-danger" href="javascript:void(0)" onclick="$.operate.remove()"><i class="fa fa-remove"></i>删除</a>
                             </td>
                             <td style="padding-left: 20px">
                                 <a class="btn btn-success" onclick="">
                                     <i class="fa fa-plus"></i> 签到
                                 </a>
                             </td>
                         </tr>-->
            </tbody>
            </table>
            <script type="text/javascript">
                var list;
                window.addEventListener('DOMContentLoaded', (event) => {
                    tableSet()
                });
                function import2excel() {
                    $.modal.open('Excel导入','/paiban/paibanTest/excelImport',true)
                }
                function tableSet(value) {
                    if (value === undefined || value===null){
                        var date = new Date().toLocaleDateString().replace("/","-").replace("/","-")
                        $.ajax({
                            url:"/paiban/paibanTest/list",//要请求的服务器url
                            data:{
                                year:date.split("-")[0],
                                month:date.split("-")[1]
                            },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
                            async:false,//是否是异步请求
                            cache:false,//是否缓存结果
                            type:"POST",//请求方式
                            //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                            success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
                                list = result
                                //console.log(list)
                                //location.reload();
                            }
                        })
                    }
                    else {
                        $.ajax({
                            url:"/paiban/paibanTest/list",//要请求的服务器url
                            data:{
                                year:value.split("-")[0],
                                month:value.split("-")[1]
                            },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
                            async:false,//是否是异步请求
                            cache:false,//是否缓存结果
                            type:"POST",//请求方式
                            //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                            success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
                                list = result
                                //console.log(list)
                                //location.reload();
                            }
                        })
                    }
                    const tbody1Set = document.getElementById("tbody1Check");
                    const tbody2Set = document.getElementById("tbody2Check");
                    const tbody3Set = document.getElementById("tbody3Check");
                    const tbody4Set = document.getElementById("tbody4Check");
                    const tbody5Set = document.getElementById("tbody5Check");

                    if (tbody1Set.childNodes.length>0){
                        for (let i = tbody1Set.childNodes.length-1; i >=0; i--) {
                            tbody1Set.removeChild(tbody1Set.childNodes[i])
                        }
                    }
                    if (tbody2Set.childNodes.length>0){
                        for (let i = tbody2Set.childNodes.length-1; i >=0; i--) {
                            tbody2Set.removeChild(tbody2Set.childNodes[i])
                        }
                    }
                    if (tbody3Set.childNodes.length>0){
                        for (let i = tbody3Set.childNodes.length-1; i >=0; i--) {
                            tbody3Set.removeChild(tbody3Set.childNodes[i])
                        }
                    }
                    if (tbody4Set.childNodes.length>0){
                        for (let i = tbody4Set.childNodes.length-1; i >=0; i--) {
                            tbody4Set.removeChild(tbody4Set.childNodes[i])
                        }
                    }
                    if (tbody5Set.childNodes.length>0){
                        for (let i = tbody5Set.childNodes.length-1; i >=0; i--) {
                            tbody5Set.removeChild(tbody5Set.childNodes[i])
                        }
                    }

                    const firstList = list[0];
                    for (let i = 0; i < firstList.length; i++) {
                        var tr1 = document.createElement("tr")
                        tr1.style.display = "table-row"
                        var td11 = document.createElement("td")
                        td11.innerHTML = firstList[i].date
                        td11.style.padding = "5px 10px 5px 10px"
                        var td12 = document.createElement("td")
                        td12.innerHTML = firstList[i].yuangongName
                        td12.style.padding = "5px 10px 5px 10px"
                        var td13 = null
                        if (firstList[i].qiandaoStatus === '未签到' || firstList[i].qiandaoStatus === 0
                            || firstList[i].qiandaoStatus === "0"){
                            td13 = document.createElement("td")
                            td13.innerHTML = "<a class='btn btn-success' " +
                                "onclick='check2today("+(i+1)+")'>" +
                                "<i class='fa fa-plus'></i> 签到</a>"
                        }

                        tr1.appendChild(td11)
                        tr1.appendChild(td12)
                        if (td13 !== null){
                            tr1.appendChild(td13)
                        }
                        if (firstList[i].qiandaoStatus.toString() === "0"){
                            tr1.style.backgroundColor = "#ff00004d"
                        }else {
                            tr1.style.backgroundColor = "#9f9"
                        }
                        tbody1Set.appendChild(tr1)
                    }

                    const twoList = list[1];
                    for (let i = 0; i < twoList.length; i++) {
                        var tr2 = document.createElement("tr")
                        tr2.style.display = "table-row"
                        var td21 = document.createElement("td")
                        td21.innerHTML = twoList[i].date
                        td21.style.padding = "5px 10px 5px 10px"
                        var td22 = document.createElement("td")
                        td22.innerHTML = twoList[i].yuangongName
                        td22.style.padding = "5px 10px 5px 10px"
                        var td23 = null;
                        if (twoList[i].qiandaoStatus === '未签到' || twoList[i].qiandaoStatus === 0
                            || twoList[i].qiandaoStatus === "0"){
                            td23 = document.createElement("td")
                            td23.innerHTML = "<a class='btn btn-success' " +
                                "onclick='check2today("+(i+8)+")'>" +
                                "<i class='fa fa-plus'></i> 签到</a>"
                        }
                        tr2.appendChild(td21)
                        tr2.appendChild(td22)
                        if (td23 !== null){
                            tr2.appendChild(td23)
                        }
                        if (twoList[i].qiandaoStatus.toString() === "0"){
                            tr2.style.backgroundColor = "#ff00004d"
                        }else {
                            tr2.style.backgroundColor = "#9f9"
                        }
                        tbody2Set.appendChild(tr2)
                    }

                    const threeList = list[2];
                    for (let i = 0; i < threeList.length; i++) {
                        var tr3 = document.createElement("tr")
                        tr3.style.display = "table-row"
                        var td31 = document.createElement("td")
                        td31.innerHTML = threeList[i].date
                        td31.style.padding = "5px 10px 5px 10px"
                        var td32 = document.createElement("td")
                        td32.innerHTML = threeList[i].yuangongName
                        td32.style.padding = "5px 10px 5px 10px"
                        var td33 = null;
                        if (threeList[i].qiandaoStatus === '未签到' || threeList[i].qiandaoStatus === 0
                            || threeList[i].qiandaoStatus.toString() === "0"){
                            td33 = document.createElement("td")
                            td33.innerHTML = "<a class='btn btn-success' " +
                                "onclick='check2today("+(i+15)+")'>" +
                                "<i class='fa fa-plus'></i> 签到</a>"
                        }
                        tr3.appendChild(td31)
                        tr3.appendChild(td32)
                        if (td33 !== null){
                            tr3.appendChild(td33)
                        }
                        if (threeList[i].qiandaoStatus.toString() === "0"){
                            tr3.style.backgroundColor = "#ff00004d"
                        }else {
                            tr3.style.backgroundColor = "#9f9"
                        }
                        tbody3Set.appendChild(tr3)
                    }

                    const fourList = list[3];
                    for (let i = 0; i < fourList.length; i++) {
                        var tr4 = document.createElement("tr")
                        tr4.style.display = "table-row"
                        var td41 = document.createElement("td")
                        td41.innerHTML = fourList[i].date
                        td41.style.padding = "5px 10px 5px 10px"
                        var td42 = document.createElement("td")
                        td42.innerHTML = fourList[i].yuangongName
                        td42.style.padding = "5px 10px 5px 10px"
                        var td43 = null;
                        if (fourList[i].qiandaoStatus === '未签到' || fourList[i].qiandaoStatus === 0
                            || fourList[i].qiandaoStatus === "0"){
                            td43 = document.createElement("td")
                            td43.innerHTML = "<a class='btn btn-success' " +
                                "onclick='check2today("+(i+22)+")'>" +
                                "<i class='fa fa-plus'></i> 签到</a>"
                        }
                        tr4.appendChild(td41)
                        tr4.appendChild(td42)
                        if (td43 !== null){
                            tr4.appendChild(td43)
                        }
                        if (fourList[i].qiandaoStatus.toString() === "0"){
                            tr4.style.backgroundColor = "#ff00004d"
                        }else {
                            tr4.style.backgroundColor = "#9f9"
                        }
                        tbody4Set.appendChild(tr4)
                    }

                    const fiveList = list[4];
                    for (let i = 0; i < fiveList.length; i++) {
                        var tr5 = document.createElement("tr")
                        tr5.style.display = "table-row"
                        var td51 = document.createElement("td")
                        td51.innerHTML = fiveList[i].date
                        td51.style.padding = "5px 10px 5px 10px"
                        var td52 = document.createElement("td")
                        td52.innerHTML = fiveList[i].yuangongName
                        td52.style.padding = "5px 10px 5px 10px"
                        var td53 = null;
                        if (fiveList[i].qiandaoStatus === '未签到' || fiveList[i].qiandaoStatus === 0
                            || fiveList[i].qiandaoStatus.toString() === "0"){
                            td53 = document.createElement("td")
                            td53.innerHTML = "<a class='btn btn-success' " +
                                "onclick='check2today("+(i+28)+")'>" +
                                "<i class='fa fa-plus'></i> 签到</a>"
                        }
                        tr5.appendChild(td51)
                        tr5.appendChild(td52)
                        if (td53 !== null){
                            tr5.appendChild(td53)
                        }
                        if (fiveList[i].qiandaoStatus.toString() === "0"){
                            tr5.style.backgroundColor = "#ff00004d"
                        }else {
                            tr5.style.backgroundColor = "#9f9"
                        }
                        tbody5Set.appendChild(tr5)
                    }

                }
                function check2today(value) {
                    var date = new Date().toLocaleDateString().replace("/","-").replace("/","-")
                    $.ajax({
                        url:"/paiban/paibanTest/check2today",//要请求的服务器url
                        data:{
                            year:date.split("-")[0],
                            month:date.split("-")[1],
                            day: value
                        },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
                        async:false,//是否是异步请求
                        cache:false,//是否缓存结果
                        type:"POST",//请求方式
                        //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                        success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
                            alert(result.msg)
                            location.reload();
                        }
                    })
                }
            </script>
        </div></div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('paiban:paibanTest:edit')}]];
    var removeFlag = [[${@permission.hasPermi('paiban:paibanTest:remove')}]];
    var prefix = ctx + "paiban/paibanTest";

    $(function() {
        var options = {

            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
        };
        $.table.init(options);
    });

    $("input[name='date']").datetimepicker({
        format: "yyyy-mm",
        minView: "month",
        autoclose: true
    });

    function toggleMonths() {
        var cont = document.getElementById('months');
        if (cont.style.display == 'block') {
            cont.style.display = 'none';
        } else {
            cont.style.display = 'block';
        }
    }

    function removeRQ(){
        var Str = "";
        var fnum = 0;

    //div id="calendarDays"
        var divlist = $('div[id="calendarDays"]').children()
        // console.log(divlist.children('input')[0].checked);


    if (divlist[6].id===""){
        fnum=7;
    }else {
        if (divlist[5].id===""){
            fnum=6;
        }else {
            if (divlist[4].id===""){
                fnum=5;
            }else{
                if (divlist[3].id===""){
                    fnum=4;
                }else {
                    if (divlist[2].id===""){
                        fnum=3;
                    }else {
                        if (divlist[1].id===""){
                            fnum=2;
                        }else {
                            if(divlist[0].id===""){
                                fnum=1;
                            }
                        }
                    }
                }
            }
        }
    }

    for (let i=0; i < divlist.children('input').length; i++) {
            var check_ =  divlist.children('input')[i].checked


            if (check_ === true){

                // const a = divlist[i].innerText.split("\\n")[0];
                const a = divlist[i+fnum].id;
                Str = Str + a+",";
                console.log("SDS"+Str);
            }

    }
    $.ajax({
        url:"/paiban/paibanTest/remove",//要请求的服务器url
        data:{
            date:Str
        },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
        async:false,//是否是异步请求
        cache:false,//是否缓存结果
        type:"POST",//请求方式
        //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
        success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
            location.reload();
        }
    })
}
</script>
</body>
</html>